<template>
    <a-card :bordered="false">
        <a-row>
            <a-col style="float: left">
                <a-button :style="{ marginBottom: '1rem' }" type="primary" @click="handleAdd"> 新增</a-button>
            </a-col>
        </a-row>
        <a-tabs :active-key="activeId" tabPosition="top" @change="handleChangeActiveId">
            <a-tab-pane v-for="item in flowType" :key="item.type">
                <template slot="tab">
                    {{ item.name }}
                </template>
                <a-table @change="handleTableChange" rowKey="dataId" :loading="dataLoading" :columns="columns" :data-source="data" :pagination="ipagination">
                    <template slot="productName" slot-scope="text, record">
                        <span v-if="record.productTag == '热门'">{{text}} <a-tag color="#f50">{{record.productTag}}</a-tag></span>
                        <span v-else-if="record.productTag == '新品'">{{text}} <a-tag color="#87d068">{{record.productTag}}</a-tag></span>
                        <span v-else>{{text}}</span>
                        <span v-if="record.productIsHot == 1" style="margin-left: 5px;"> <a-tag color="#000">热销推荐</a-tag></span>
                    </template>
                    <template slot="productThumb" slot-scope="text">
                        <a-avatar shape="square" :size="64" :src="text" />
                    </template>
                    <template slot="productFormatPrice" slot-scope="text">
                        ￥{{text}}
                    </template>
                    <template slot="productFormatDiscountPrice" slot-scope="text">
                        ￥{{text}}
                    </template>
                    <template slot="productFormatVipPrice" slot-scope="text">
                        <span v-if="text">￥{{text}}</span>
                        <span v-else>-</span>
                    </template>
                    <template slot="productStatus" slot-scope="text">
                        <a-tag color="red" v-if="text == 0">下架</a-tag>
                        <a-tag color="green" v-else>上架</a-tag>
                    </template>
                    <span slot="action" slot-scope="text, record">
                        <a @click="handleEdit(record)">编辑</a>
                        <a-divider type="vertical"/>
                        
                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.dataId)">
                            <a>删除</a>
                        </a-popconfirm>
                        <a-divider type="vertical"/>

                        <a-dropdown>
                            <a class="ant-dropdown-link">
                                更多 <a-icon type="down" />
                            </a>
                            <a-menu slot="overlay">
                                <a-menu-item>
                                    <template>
                                        <a v-if="record.productIsHot == 0" @click="handlePush(record.dataId, 1)">设为热销推荐</a>
                                        <a v-else @click="handlePush(record.dataId, 0)">取消热销推荐</a>
                                    </template>
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </span>
                </a-table>
            </a-tab-pane>
        </a-tabs>

        <product-modal ref="modalForm" @ok="modalFormOk"></product-modal>

    </a-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
import { numberToChinese } from '@/utils/util'
import moment from 'moment'
import ProductModal from './modules/ProductModal'


export default {
    name: 'ShopProduct',
    components: {
        ProductModal
    },
    data() {
        return {
            dataLoading: true,
            activeId: 0,
            flowType: [
                {
                    type: 0,
                    name: "全部"
                },
                {
                    type: 1,
                    name: "监测设备"
                },
                {
                    type: 3,
                    name: "服务"
                },
                {
                    type: 4,
                    name: "营养餐包"
                }
            ],
            data: [],
            columns: [
                {
                    title: '商品缩略图',
                    dataIndex: 'productThumb',
                    key: 'productThumb',
                    scopedSlots: { customRender: 'productThumb' }
                },
                {
                    title: '商品名称',
                    dataIndex: 'productName',
                    key: 'productName',
                    scopedSlots: { customRender: 'productName' }
                },
                {
                    title: '商品原价',
                    dataIndex: 'productFormatPrice',
                    key: 'productFormatPrice',
                    scopedSlots: { customRender: 'productFormatPrice' }
                },
                {
                    title: '商品折扣价',
                    dataIndex: 'productFormatDiscountPrice',
                    key: 'productFormatDiscountPrice',
                    scopedSlots: { customRender: 'productFormatDiscountPrice' }
                },
                {
                    title: '商品会员价',
                    dataIndex: 'productFormatVipPrice',
                    key: 'productFormatVipPrice',
                    scopedSlots: { customRender: 'productFormatVipPrice' }
                },
                {
                    title: '商品状态',
                    dataIndex: 'productStatus',
                    key: 'productStatus',
                    scopedSlots: { customRender: 'productStatus' }
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: {customRender: 'action'},
                    align: "center",
                    width: 170
                }
            ],
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
        }
    },
    watch: {
        activeId() {
            if (this.activeId >= 0) {
                console.log('activeId', this.activeId)

                // if (this.activeId == 3 ) {
                //     this.columns.splice(this.columns.length - 1, 0, {
                //         title: '退款原因',
                //         dataIndex: 'flowRefundReason',
                //         key: 'flowRefundReason',
                //         scopedSlots: { customRender: 'flowRefundReason' }
                //     });
                // } else {
                //     this.columns?.splice(this.columns?.findIndex(v => v.key === 'flowRefundReason'), 1)
                // }

                this.handleGetTableData()
            }
        }
    },
    created() {
        this.getInit()
    },
    methods: {
        ...mapGetters(["doctorId", "orgCode"]),
        async getInit() {
            await this.handleGetTableData()
        },
        handleGetTableData() {
            this.dataLoading = true
            postAction('/shop/product/page', { productCategory: this.activeId, doctorId: this.doctorId() || '0', orgCode: this.orgCode() })
                .then(res => {
                    if (res.success) {
                        this.data = res.result.records
                        if (res.result.total) {
                            this.ipagination.total = res.result.total
                        } else {
                            this.ipagination.total = 0
                        }
                    } else {
                        this.$message.warning(res.message)
                    }
                })
                .finally(() => {
                    this.dataLoading = false
                })
        },
        handleTableChange(pagination) {
            this.ipagination = pagination
            this.handleGetTableData()
        },
        handleChangeActiveId(key) {
            this.activeId = key
        },
        handleAdd() {
            this.$refs.modalForm.add({productCategory: this.activeId == 0 ? undefined : this.activeId, productStatus: 1});
            this.$refs.modalForm.title = "新增";
            this.$refs.modalForm.disableSubmit = false;
        },
        handleEdit(record) {
            this.$refs.modalForm.edit(record);
            this.$refs.modalForm.title = "编辑";
            this.$refs.modalForm.disableSubmit = false;
        },
        handleDelete(id) {
            deleteAction('/shop/product/delete', {id}).then(res => {
                if (res.success) {
                    this.$message.success('删除成功')
                    this.getInit()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        handlePush(id, status) {
            putAction('/shop/product/update', {id, status}).then(res => {
                if (res.success) {
                    this.$message.success('操作成功')
                    this.getInit()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        modalFormOk() {
            // 新增/修改 成功时，重载列表
            this.getInit();
        }
    }
}
</script>

<style lang="less" scoped>
</style>

